﻿@model IEnumerable<dynamic>
<script type="text/javascript">
    $(window).load(function () {
        $('#slider').nivoSlider({
            effect: 'fade', //Specify sets like: 'fold,fade,sliceDown'
            slices: 10,
            animSpeed: 500, //Slide transition speed
            pauseTime: 7000,
            startSlide: 0, //Set starting Slide (0 index)
            directionNav: false, //Next & Prev
            directionNavHide: false, //Only show on hover
            controlNav: true, //1,2,3...
            controlNavThumbs: false, //Use thumbnails for Control Nav
            controlNavThumbsFromRel: false, //Use image rel for thumbs
            controlNavThumbsSearch: '.jpg', //Replace this with...
            controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
            keyboardNav: true, //Use left & right arrows
            pauseOnHover: true, //Stop animation while hovering
            manualAdvance: false, //Force manual transitions
            captionOpacity: 1.0, //Universal caption opacity
            beforeChange: function () { },
            afterChange: function () { },
            slideshowEnd: function () { } //Triggers after all slides have been shown
        });
    }); 
</script>
<div id="tmnivoslider">
    <div id="slider">
        @foreach (var item in Model)
        { 
            <a href="/@item.CatUrl/@item.ProdUrl/@(item.ProdId).html">
                <img style="display: none;" src="@Html.UploadPath("Products")678x374_@(item.ImageName)" alt="" title="@item.Description"/></a>
        }
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
    </div>
</div>
